<!-- <template>
<div>
    <header>
    <div class="search-return" @click="goBack">
        <i class="iconfont icon-fanhui"></i>
    </div>
    <div class="search-main">
        <i class="iconfont icon-fangdajing"></i>
        <form action="" onsubmit="return false" @keyup.enter="goSearchList">
            <input type="search" placeholder="搜索你喜欢的" v-model="searchVal"/>
        </form>
    </div>
    <div class="search-btn" @click="goSearchList">搜索</div>
  </header>
</div>
</template>

<script>

export default {
    data(){
        return{
            searchVal:this.$route.query.key || '',
            searchArr:[],
        }
    },
    created(){
       
    },
    methods:{
        goBack(){
            this.$router.back();
        },
        goSearchList(){
            //如果搜索的关键字是没有的，那么就直接return
            if( !this.searchVal ) return;

            //判断之前有没有搜索的本地存储
            if(!localStorage.getItem('searchList')){
                //没有
                localStorage.setItem('searchList','[]')
            }else{
                //之前有
                this.searchArr = JSON.parse( localStorage.getItem('searchList'))
            }
            //增加数据
            this.searchArr.unshift(this.searchVal);

            //ES6去重
            let newArr = new Set(this.searchArr)

            //给本地存储赋值
            localStorage.setItem('searchList',JSON.stringify(Array.from(newArr)))


            if( this.searchVal === this.$route.query.key) return;

            //跳转页面
            this.$router.push({
                name:'list',
                query:{
                    key:this.searchVal
                }
            })
        }
    }
}
</script>

<style scoped>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 1.173333rem;
  color: #fff;
  background-color: #b0352f;
}
.search-return,
.serach-btn {
  padding: 0 0.266666rem;
}
.search-return i {
  font-size: 0.746666rem;
}
.search-main {
  display: flex;
  align-items: center;
  width: 6.933333rem;
  height: 0.8rem;
  border-radius: 12px;
  background-color: #ffffff;
}
.search-main i {
  padding: 0 0.266666rem;
  color: #666666;
}
.search-main form {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.search-main form input {
  width: 100%;
}
.serach-btn {
  font-size: 0.426666rem;
}
</style> -->

<!-- <style scoped>


header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 1.173333rem;
    color: #fff;
    background-color: #b0352f;
}
.search-return ,.search-btn{
    padding: 0 0.2666rem;
}
.search-return i{
    font-size: 0.74666rem;
}
.search-main{
    display: flex;
    align-items: center;
    width: 6.933333rem;
    height: 0.8rem;
    border-radius: 12px;
    background-color: #ffffff;
}
.search-main i{
    padding: 0 0.26666rem;
    color: #666666;
}
.search-main  form{
    display: flex;
    justify-content: center;
    align-content: center;
    width:100%;
}
.search-main  form input{

}
.search-btn{
    font-size: 0.42666rem;
}
</style> -->



<template>
  <header>
    <div class="search-return" @click="goBack">
      <i class="iconfont icon-fanhui"></i>
    </div>

    <div class="search-main">
      <i class="iconfont icon-fangdajing"></i>
      <form action="" onsubmit="return false" @keyup.enter="goSearchList">
        <input
          type="search"
          placeholder="搜索您喜欢的产品..."
          v-model="searchVal"
        />
      </form>
    </div>

    <div class="serach-btn" @click="goSearchList">搜索</div>
  </header>
</template>

<script>


export default {
  data() {
    return {
      searchVal: this.$route.query.key || "", //如果搜索框内容不为空的话就展示搜索的内容
      searchArr: [],
    };
  },
  // created() {
  //   console.log(this.$route.query);
  // },
  methods: {
    // 返回按钮,事件
    goBack() {
      this.$router.back();
    },
    // 跳转到搜索的详情页面
    goSearchList() {
      //如果搜索的关键字是没有的，那就直接return
      if (!this.searchVal) return;
      //判断之前有没有搜索的本地存储
      if (!localStorage.getItem("searchList")) {
        //没有
        localStorage.setItem("searchList", "[]");
      } else {
        //之前有就获取
        this.searchArr = JSON.parse(localStorage.getItem("searchList"));
      }
      // 向数组增加数据
      this.searchArr.unshift(this.searchVal);
      //ES6去重
      let newArr = new Set(this.searchArr);

      // 给本地存储赋值  Array.from(newArr)转为真数组
      localStorage.setItem("searchList", JSON.stringify(Array.from(newArr)));

      // 如果搜索路径没有变化就不跳转页面
      if (this.searchVal === this.$route.query.key) return;

      //跳转页面
      this.$router.push({
        name: "list",
        query: {
          key: this.searchVal,
        },
      });
    },
  },
  watch:{
    $route(){
      this.getData()
    }
  }
};
</script>

<style scoped>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 1.173333rem;
  color: #fff;
  background-color: #b0352f;
}
.search-return,
.serach-btn {
  padding: 0 0.266666rem;
}
.search-return i {
  font-size: 0.746666rem;
}
.search-main {
  display: flex;
  align-items: center;
  width: 6.933333rem;
  height: 0.8rem;
  border-radius: 12px;
  background-color: #ffffff;
}
.search-main i {
  padding: 0 0.266666rem;
  color: #666666;
}
.search-main form {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.search-main form input {
  width: 100%;
}
.serach-btn {
  font-size: 0.426666rem;
}
</style>
